<template>
    <div>
        <div id="div1" v-if="visible">这是div的dom节点</div>

        <el-button @click="visible = !visible"></el-button>
        输入框1<el-input v-model="msg1"></el-input>
        输入框2<el-input v-model="msg2"></el-input>
        <el-button @click="submit">submit</el-button>

        <router-link to="/test">去test组件</router-link>
    </div>
</template>

<script>
// 钩子函数

// beforeCreate  --- 实例创建之前
// created  --- 实例创建之 后
// vue局部组件数据以及局部组件的方法创建完成以后，执行的函数

// beforeMount --- dom节点挂载完成之前
// mounted --- dom节点挂载完成以后

// beforeUpdate --- dom节点更新之前
// updated --- dom节点更新之后

// beforeDestroy --- (监听器)实例被销毁之前触发
// destroyed --- (监听器)实例被销毁之后触发

    export default {
        data () {
            return {
                visible: true,
                msg1: '123',
                msg2: ''
            }
        },
        // beforeCreate () {
        //     console.log('before', this.msg1)
        // },
        // created () {
        //     console.log('after', this.msg1)
        // },
        // beforeMount () {
        //     console.log(document.getElementById('div1'))
        // },
        // mounted () {
        //     console.log(document.getElementById('div1'))
        // },
        // beforeUpdate () {
        //     console.log(document.getElementById('div1'))
        // },
        // updated () {
        //     console.log(document.getElementById('div1'))
        // },
        // beforeDestroy () {
        //     console.log(this.msg1)
        //     console.log(document.getElementById('div1'))
        // },
        // destroyed () {
        //     console.log('销毁')
        //     console.log(this.msg1)
        //     console.log(document.getElementById('div1'))
        // },
        methods: {
            submit () {
                // path + query
                // name + params
                // this.$router.push({
                //     path: '/test'
                // })

                this.$router.push({
                    name: 'test'
                })
            }
        }
    }
</script>

<style scoped lang="scss">
</style>